<template>
    <div class="mt-4">
        <el-input v-model="input" placeholder="Please input" class="input-with-select">
            <template #prepend>
                <el-select id="select" v-model="select" placeholder="Select" style="width: 115px">
                    <el-option label="id" value="id" />
                    <el-option label="name" value="name" />
                    <el-option label="phonenumber" value="phonenumber" />
                </el-select>
            </template>
            <template #append>
                <el-button @click="search">
                    <el-icon>
                        <Search />
                    </el-icon>
                </el-button>
            </template>
        </el-input>
    </div>
    <ul>
        <li> id:{{ tableData.id }} </li>
        <li> 姓名:{{ tableData.name }} </li>
        <li> 年龄:{{ tableData.age }} </li>
        <li> 班级:{{ tableData.classId }} </li>
        <li> 手机号:{{ tableData.phonenumber }} </li>
        <li> 性别:{{ tableData.gender }} </li>
    </ul>
</template>
<script>
import axios from "axios"
import { Search } from "@element-plus/icons-vue"
export default {
    components: {
        Search
    },
    data() {
        return {
            tableData: {
                id: "",
                name: "",
                age: "",
                classId: "",
                phonenumber: "",
                gender: ""
            },
            searchKey: "",
            searchValue: "",
            select: "选择",
            input: "夏烨"
        }
    },
    methods: {
        search() {
            this.searchKey = document.getElementById("select").value;
            let searchURL;
            if (this.searchKey == "id") {
                searchURL = "/api/student/selectById";
                let id = this.input;
                axios.get(searchURL + "?id=" + id)
                    .then(res => {
                        console.log("提交成功", res.data);
                        this.tableData = res.data;
                        console.log(res.data);
                    })
                    .catch(error => {
                        console.error("发送失败", error);
                    })
            }
            if (this.searchKey == "name") {
                searchURL = "/api/student/selectByName";
                let name = this.input;
                axios.get(searchURL + "?name=" + name)
                    .then(res => {
                        console.log("提交成功", res.data);
                        this.tableData = res.data;
                    })
                    .catch(error => {
                        console.error("发送失败", error);
                    })
            }
            if (this.searchKey == "phonenumber") {
                searchURL = "/api/student/selectByPhonenumber";
                let phonenumber=this.input;
                axios.get(searchURL + "?phonenumber=" + phonenumber)
                    .then(res => {
                        console.log("提交成功", res.data);
                        this.tableData = res.data;
                    })
                    .catch(error => {
                        console.error("发送失败", error);
                    })
            }
            console.log(searchURL);

        }
    }


}

</script>

<style scoped>
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding: 10px;
    margin-bottom: 5px;
    background-color: #f0f0f0;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

li:last-child {
    margin-bottom: 0;
}

li span {
    margin-left: 10px;
}
</style>